<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我要吃火锅 | 首页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
    <style>
    .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #0bb59b;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 140%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 30px 0 50px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
    </style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
  <div class="am-container">
    <h1 class="am-topbar-brand"><a href="/">火火火锅</a></h1>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only"
            data-am-collapse="{target: '#collapse-head'}">
            <span class="am-sr-only">切换</span>
            <span class="am-icon-bars"></span>
    </button>

    <div class="am-collapse am-topbar-collapse" id="collapse-head">
      <ul class="am-nav am-nav-pills am-topbar-nav">
        <li class="am-active"><a href="">首页</a></li>
        <li><a href="">test</a></li>
        <li class="am-dropdown" data-am-dropdown>
          <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            test1 <span class="am-icon-caret-down"></span>
          </a>
          <ul class="am-dropdown-content">
            <li class="am-dropdown-header">标题</li>
            <li><a href="">1. 默认样式</a></li>
            <li><a href="">2. 基础设置</a></li>
            <li><a href="">3. 文字排版</a></li>
            <li><a href="">4. 网格系统</a></li>
          </ul>
        </li>
      </ul>

      <div class="am-topbar-right">
        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button>
      </div>

      <div class="am-topbar-right">
        <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button>
      </div>
    </div>
  </div>
</header>

<div class="get">
  <div class="am-g">
    <div class="am-u-lg-12">
      
      <p>
        你的火锅号为：{{ UserID }}<br>
        当前房间号为：{{ RoomID }}
      </p>
      <p>
        <img src="/assets/i/火锅{{ SoupBaseNum }}.png" alt="未开始"/>
      </p>
      <p>
          {{ SoupBase }}
      </p>
    </div>
  </div>
</div>
<form method="post" action="/Room/{{ RoomID }}">
<input type="hidden" name="tk" id="tk" value="">
<div style="text-align: center;">
    <div class="am-btn-group am-btn-group-lg">
        <button type="button" class="am-btn am-btn-primary am-radius" data-am-modal="{target: '#doc-modal-1'}">已完成</button>
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
          <div class="am-modal-dialog">
            <div class="am-modal-hd">已完成清单：
              <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
              {% for time,Success in ALLFoodDict.Success.items %}
                {% for key,item in Success.items %}
                    {{ key }} : {{item}}<br>
                {% endfor %}
              <hr data-am-widget="divider" class="am-divider am-divider-default" />
              {% endfor %}
            </div>
          </div>
        </div>
        <button type="button" class="am-btn am-btn-primary am-radius" data-am-modal="{target: '#doc-modal-2'}">用户</button>
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2">
          <div class="am-modal-dialog">
            <div class="am-modal-hd">房内用户：
              <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
              {% for user in RoomDict.User %}
                {{ user }}<br>
              {% endfor %}
            </div>
          </div>
        </div>
        <button type="button" class="am-btn am-btn-primary am-radius" data-am-modal="{target: '#doc-modal-3'}">食材</button>
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-3">
          <div class="am-modal-dialog">
            <div class="am-modal-hd">已经下锅食材清单：
              <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
              {% for time,FoodDict in ALLFoodDict.FoodDict.items %}
                {% for key,item in FoodDict.items %}
                    {{ key }} : {{item}}<br>
                {% endfor %}
              <hr data-am-widget="divider" class="am-divider am-divider-default" />
              {% endfor %}
            </div>
          </div>
        </div>
        
        <button type="submit" class="am-btn am-btn-primary am-radius">提交菜单</button>
    </div>
</div>
<div class="am-panel-group" id="accordion">
    <div class="am-panel am-panel-default ">
        <div class="am-panel-hd">
        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}">
          汤底
        </h4>
        </div>
        <div id="do-not-say-1" class="am-panel-collapse am-collapse">
          <div class="am-form-group">
            <label for="doc-select-SoupBase">请下拉选择汤底</label>
            <select id="doc-select-SoupBase" name="SoupBase">
                <option value="{{ SoupBase }}">已选择：{{ SoupBase }}</option>
                {% for SoupBase in AllType.SoupBase %}
                <option value="{{ SoupBase }}">{{ SoupBase }}</option>
                {% endfor %}
            </select>
            <span class="am-form-caret"></span>
          </div>
            
        </div>
    </div>
    <div class="am-panel am-panel-default am-form-group">
      <div class="am-panel-hd">
        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}">
          肉类、豆制品
        </h4>
      </div>
      <div id="do-not-say-2" class="am-panel-collapse am-collapse am-in">
        <div class="am-panel-bd">
            {% for Protein in AllType.Protein %}
            <div style="float: right;">
                {{ Protein }} : 
                <button type="button" class="am-btn am-btn-warning" onclick="del_{{ Protein }}();">-</button>
                <input type="text" style="width: 20%;" class="" id="{{ Protein }}" name="{{ Protein }}" readonly="readonly" value="0">
                <button type="button" class="am-btn am-btn-success" onclick="add_{{ Protein }}();">+</button>
            </div>
            <hr data-am-widget="divider" class="am-divider am-divider-default" />
            {% endfor %}
        </div>
      </div>
    </div>
    <div class="am-panel am-panel-default">
      <div class="am-panel-hd">
        <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-3'}">
            蔬菜
        </h4>
      </div>
      <div id="do-not-say-3" class="am-panel-collapse am-collapse">
        <div class="am-panel-bd">
            {% for Vegetables in AllType.Vegetables %}
            <div style="float: right;">
                {{ Vegetables }} : 
                <button type="button" class="am-btn am-btn-warning" onclick="del_{{ Vegetables }}();">-</button>
                <input type="text" style="width: 20%;" class="" id="{{ Vegetables }}" name="{{ Vegetables }}" readonly="readonly" value="0">
                <button type="button" class="am-btn am-btn-success" onclick="add_{{ Vegetables }}();">+</button>
            </div>
            <hr data-am-widget="divider" class="am-divider am-divider-default" />
            {% endfor %}
        </div>
      </div>
    </div>
    <div class="am-panel am-panel-default">
        <div class="am-panel-hd">
          <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-4'}">
              面、粉类
          </h4>
        </div>
        <div id="do-not-say-4" class="am-panel-collapse am-collapse">
          <div class="am-panel-bd">
            {% for Noodles in AllType.Noodles %}
            <div style="float: right;">
                {{ Noodles }} : 
                <button type="button" class="am-btn am-btn-warning" onclick="del_{{ Noodles }}();">-</button>
                <input type="text" style="width: 20%;" class="" id="{{ Noodles }}" name="{{ Noodles }}" readonly="readonly" value="0">
                <button type="button" class="am-btn am-btn-success" onclick="add_{{ Noodles }}();">+</button>
            </div>
            <hr data-am-widget="divider" class="am-divider am-divider-default" />
            {% endfor %}
          </div>
        </div>
    </div>
</div>
</form>

<footer class="footer">
  <p>© 2020 <a href="https://gitee.com/KratosMax/OpManager" target="_blank">小火车哒</a></p>
</footer>

<script type="text/javascript">
{% for Protein in AllType.Protein %}
    function add_{{ Protein }}(){  
            var num = document.getElementById("{{ Protein }}").value;
            if(num == 20 || num > 20){  
                document.getElementById("{{ Protein }}").value = 20;  
            }else{  
                document.getElementById("{{ Protein }}").value++;
            }
        }
    function del_{{ Protein }}(){  
            var num = document.getElementById("{{ Protein }}").value;
            if(num == 0 || num < 0){
                document.getElementById("{{ Protein }}").value = 0;  
            }else{  
                document.getElementById("{{ Protein }}").value--;
            }
        }
{% endfor %}
{% for Vegetables in AllType.Vegetables %}
    function add_{{ Vegetables }}(){  
            var num = document.getElementById("{{ Vegetables }}").value;
            if(num == 20 || num > 20){  
                document.getElementById("{{ Vegetables }}").value = 20;  
            }else{  
                document.getElementById("{{ Vegetables }}").value++;
            }
        }
    function del_{{ Vegetables }}(){  
            var num = document.getElementById("{{ Vegetables }}").value;
            if(num == 0 || num < 0){
                document.getElementById("{{ Vegetables }}").value = 0;  
            }else{  
                document.getElementById("{{ Vegetables }}").value--;
            }
        }
{% endfor %}
{% for Noodles in AllType.Noodles %}
    function add_{{ Noodles }}(){  
            var num = document.getElementById("{{ Noodles }}").value;
            if(num == 20 || num > 20){  
                document.getElementById("{{ Noodles }}").value = 20;  
            }else{  
                document.getElementById("{{ Noodles }}").value++;
            }
        }
    function del_{{ Noodles }}(){  
            var num = document.getElementById("{{ Noodles }}").value;
            if(num == 0 || num < 0){
                document.getElementById("{{ Noodles }}").value = 0;  
            }else{  
                document.getElementById("{{ Noodles }}").value--;
            }
        }
{% endfor %}
</script>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/assets/js/amazeui.min.js"></script>
</body>
</html>
